<template>
    <div class="dialog-container">
        <el-dialog
            ref="v-dialog"
            :title="title"
            :visible.sync="visible"
            :width="width"
            :modal="modal"
            :center="false"
            :before-close="handleBeforeClose"
            :show-close="closeStattus"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :destroy-on-close="true"
            :lock-scroll="true"
            :sty="sty"
            :show="show"
            @close="close">
            <div :style="'overflow:auto;height:'+height">
                <slot name="content" />
                <div class="el-dialog__footer">
                    <span v-if="showFooter" slot="footer" class="dialog-footer">
                        <template>
                            <slot name="custom" />
                        </template>
                        <el-button v-if="stype==='add'" size="mini" @click="handleConfirmFunc('add')">{{ confirmBtnName }}</el-button>
                        <el-button v-if="stype==='edit'" size="mini" @click="handleConfirmFunc('edit')">{{ upDateBtnName }}</el-button>
                        <el-button size="mini" @click="closeClickFunc">关 闭</el-button>
                    </span>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import bus from './eventbus.js'
    /**
         *  Auth by clj. on 2020.4.22
         * 功能介绍：
         * 1、title：可传入标题
         * 2、width: 宽度，字符串类型扩展性能较佳，可设置不同单位
         * 3、modal：是否添加遮罩层
         * 4、center: 是否居中布局显示
         * 5、close-on-click-modal：点击遮罩禁止关闭
         * 6、close-on-press-escape：ESC禁止关闭
         * 7、destroy-on-close：关闭时销毁组件
         * 8、confirmBtnName：提交按钮显示的文字
         * 8、upDateBtnName：更新按钮显示的文字
         * 9、showFooter：是否显示弹窗页脚操作按钮
         * 10、handleConfirmFunc：保存按钮回调函数：参数：add、edit
         * */
    export default {
        name: 'VDialog',
        props: {
            closeStattus: {
                type: Boolean,
                default: false
            },
            show: {
                type: Boolean,
                default: false
            },
            showFooter: {
                type: Boolean,
                default: true
            },
            modal: { // 遮罩
                type: Boolean,
                default: true
            },
            title: {
                type: String,
                default: '提示'
            },
            width: {
                type: String,
                default: '700px'
            },
            height: {
                type: String,
                default: '380px'
            },
            sty: {
                type: String,
                default: 'add'
            },
            confirmBtnName: {
                type: String,
                default: '保 存'
            },
            upDateBtnName: {
                type: String,
                default: '修 改'
            },
            handleBeforeClose: Function,
            handleConfirmFunc: Function,
            closeClickFunc: Function
        },
        data() {
            return {
                visible: this.show,
                stype: this.sty
            }
        },
        watch: {
            stype(v) {
                //  传入 add、edit、view 判断弹窗页面类型
                console.log('----------->', v)
            },
            show() {
                this.visible = this.show
            }
        },
        mounted() {
            bus.$on('sty', v => {
                if (v) {
                    this.$set(this, 'stype', v)
                    // this.$refs.ruleForm.resetFields()
                }
            })
        },
        created() {
            console.log('this.$options.name', this.$options.name)
        },
        methods: {
            close() {
                this.$emit('closeClick', '')
            }
        }
    }
</script>
